<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			const data = {
				name: "前端技术",
				children: [{
						name: "html"
					},
					{
						name: "css"
					},
					{
						name: "js",
						children: [{
							name: "jquery"
						}, {
							name: "bootstrap"
						}]
					}
				]
			}
			var option = {
				title: {
					text: '课程结构'
				},
				tooltip: {
					trigger: 'item',
					triggerOn: 'mousemove'
				},
				series: [{
					type: 'tree',
					data: [data],
					top: '1%',
					left: '7%',
					bottom: '1%',
					right: '20%',
					symbolSize: 10,
					label: {
						position: 'left',
						verticalAlign: 'middle',
						align: 'right',
						fontSize: 12
					},
					leaves: {
						label: {
							position: 'right',
							verticalAlign: 'middle',
							align: 'left'
						}
					},
					emphasis: {
						focus: 'descendant'
					},
					expandAndCollapse: true,
					animationDuration: 550,
					animationDurationUpdate: 750
				}]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>
